<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="xiaomifont/iconfont.css">
    <style>
  *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
         }
  
  .dh{
      width: 100%;
      height: 40px;
      background-color: #333;
      color: #B0B0B0;
  }
  .con{
    width: 100%;
      height: 100px;
      background-color: rgb(255, 255, 255);
      color: #000000;
  }
  .w{
      width: 1260px;
      height: 40px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
  }
  .w2{
    width: 1260px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .w3{
    width: 1260px;
    height: 0px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    transition: all .3s linear;
    overflow: hidden;
  }
  
  .w3 div{
      width: 210px;
      border: 1px solid #ebebeb;
      text-align: center;
  }
  ul{
      line-height: 40px;
      display: flex;
      justify-content: space-between;
  }
.dh-1>li{
    font-size: 12px;
   padding-right: 15px;   
   cursor: pointer;
  }
.con-1>li{
    font-size: 16px;
    margin-top: 30px;
   padding-right: 20px;
   /* line-height: 100px;    */
   cursor: pointer;
  }
  .con-1>li .t1{
      color: #000;
  }
  .dh-1>li:hover{
      color: #fff;
  }
  .con-1>li:hover{
    color: rgb(255, 102, 42);
  }
  .con-1{
      width: 600px;
      height: 100%;
  }
  .logo img{
      width: 56px;
      height: 56px;
      position: relative;
      top: 20px;
  }
  .search{
      height: 100px;
      width: 400px;
      position: relative;
  }
  input{
      position: absolute;
      left: 0px;
      top: 30px;
      width: 245px;
      height: 50px;
      color: #B0B0B0;
      padding-left: 10px;
      outline: none;
      border: 2px solid black;
      /* transition: all 0.3s linear; */
  }
  button{
      width: 52px;
      height: 50px;
      position: absolute;
      top: 30px;
      left: 243px;
      cursor: pointer;
      /* transition: all 0.3s linear; */
      outline: none;
      border: 2px solid black;
      background-color: #fff;
  }
  .fdj{
      font-size: 25px;
      transition: all 0.5s linear;
  }
  .foot{
      width: 100%;
      height: 250px;
      border: 1px solid #ebebeb;
  }
  p{
      font-size: 8px;
  }
  .t1{
      margin-top: 20px;
  }
  .t2{
      color: rgb(255, 78, 34);
  }
  .lb{
      width: 700px;
      /* height: 100px; */
      /* position: relative; */
      display: flex;
      justify-content: space-between;
      line-height: 100px;
  }
  .o1{
      position: absolute;
      width: 100%;
      top: 140px;
      left: 0;
      border: 1px solid white;
      /* left: -163px; */
  }
/* .fl{
    float: left;
} */
.gw{
    background-color: #424242;
    position: relative;
    font-size: 12px;
}
.gwxl{
    height: 0px;
    width: 300px;
    position: absolute;
    right: 0;
    top: 40px;
    background-color: white;
    z-index: 999;
    text-align: center;
    line-height: 100px;
    /* display: none; */
    transition: all 0.2s linear;
    overflow: hidden;
    border: 1px solid #ebebeb;
    box-shadow: #B0B0B0;
    border-top: 1px solid #ffffff;
}
.ew{
    position: relative;
    text-align: center;
}
.ewm{
    height: 0px;
    width: 124px;
    position: absolute;
    right: -24px;
    top: 40px;
    background-color: white;
    z-index: 999;
    /* text-align: center; */
    /* line-height: 100px; */
    /* display: none; */
    transition: all 0.2s linear;
    overflow: hidden;
    border: 1px solid #ebebeb;
    box-shadow: #B0B0B0;
    border-top: 1px solid #ffffff;
}
.ser-xl{
    width: 245px;
    height: 181px;
    position: absolute;
    right: 155px;
    top: 78px;
    z-index: 999;
    /* text-align: center; */
    /* line-height: 100px; */
    display: none;
    border: 2px solid orange;
    overflow: hidden;
}
    </style>
</head>
<body>
    <div class="dh">
        <div class="w">
        <ul class="dh-1">
            <li>小米商城</li>
            <li>MIUI</li>
            <li>loT</li>
            <li>云服务</li>
            <li>天星数科</li>
            <li>有品</li>
            <li>小爱开放平台</li>
            <li>企业团购</li>
            <li>资质证照</li>
            <li>协议规则</li>
            <li class="ew">下载app
                <div class="ewm"><img src="imgs/ewm.png" alt=""></div>
            </li>
            <li>智能生活</li>
            <li>Select Location</li>
        </ul>
        <ul class="dh-1">
            <li>登录</li>
            <li>注册</li>
            <li>消息通知</li>
            <div class="gw"><i class="iconfont gwc">&#xe607;</i><span>购物车 (0)</span>
               <div class="gwxl"><span style="font-size: 8px; color: #000;">购物车中还没有商品，赶紧选购吧！</span></div>
            </div>
        </ul>
    </div>
    </div>
    <div class="con">
        <div class="w2">
            <div class="logo">
                <img src="imgs/logo-mi2.png" alt="">
            </div>
            <div class="lb">
               <ul class="con-1">
                   <li>小米手机 
                       <div class="o1">
                           
                        <div class="w3">
                            <div>
                                <img src="imgs/1.jpg" alt="">
                                <p class="t1">小米MIX FOLD</p>
                                <p class="t2">9999元起</p>
                            </div>
                            <div>
                               <img src="imgs/1.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/1.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/1.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/1.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/1.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           
                       </div> 
                           
                     
                       </div>
                  </li>
                   <li>Redmi 红米 
                    <div class="o1" style="display: none;">
                        <div class="w3">
                            <div>
                                <img src="imgs/2.jpg" alt="">
                                <p class="t1">小米MIX FOLD</p>
                                <p class="t2">9999元起</p>
                            </div>
                            <div>
                               <img src="imgs/2.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/2.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/2.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/2.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           <div>
                               <img src="imgs/2.jpg" alt="">
                               <p class="t1">小米MIX FOLD</p>
                               <p class="t2">9999元起</p>
                           </div>
                           
                       </div>
                       </div>
                    </li>
                   <li>电视 <div class="o1">
                    <div class="w3">
                        <div>
                            <img src="imgs/1.jpg" alt="">
                            <p class="t1">小米MIX FOLD</p>
                            <p class="t2">9999元起</p>
                        </div>
                        <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       
                   </div>
                   </div></li>
                   <li>笔记本 <div class="o1" style="display: none;">
                    <div class="w3">
                        <div>
                            <img src="imgs/2.jpg" alt="">
                            <p class="t1">小米MIX FOLD</p>
                            <p class="t2">9999元起</p>
                        </div>
                        <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       
                   </div>
                   </div></li>
                   <li>家电  <div class="o1">
                    <div class="w3">
                        <div>
                            <img src="imgs/1.jpg" alt="">
                            <p class="t1">小米MIX FOLD</p>
                            <p class="t2">9999元起</p>
                        </div>
                        <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       
                   </div>
                   </div></li>
                   <li>路由器   <div class="o1" style="display: none;">
                    <div class="w3">
                        <div>
                            <img src="imgs/2.jpg" alt="">
                            <p class="t1">小米MIX FOLD</p>
                            <p class="t2">9999元起</p>
                        </div>
                        <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/2.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       
                   </div>
                   </div></li>
                   <li>智能硬件 <div class="o1">
                    <div class="w3">
                        <div>
                            <img src="imgs/1.jpg" alt="">
                            <p class="t1">小米MIX FOLD</p>
                            <p class="t2">9999元起</p>
                        </div>
                        <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       <div>
                           <img src="imgs/1.jpg" alt="">
                           <p class="t1">小米MIX FOLD</p>
                           <p class="t2">9999元起</p>
                       </div>
                       
                   </div>
                   </div></li>
               </ul>
               <li class="fl">服务</li>
               <li class="fl">社区</li>
            </div>
            <div class="search">
                <input type="text" value="电视">
                <button><i class="iconfont fdj">&#xe637;</i></button>
                <div class="ser-xl"><img src="imgs/ser.png" alt=""></div>
            </div>
        </div>
    </div>
    <!-- <div class="foot">
       
       
    </div> -->
    <script src="../jQuery.js"></script>
    <script>
         $('.con-1 li').mouseenter(function(){
             var i = $(this).index();
             $('.w3').css({  height:"250px",});
             console.log($(this).index());
             $('.con-1 li').siblings().find('.o1').css({  display:"none",});
              $('.con-1 li').eq(i).find('.o1').css({  display:"block",})
              $('.o1').css({ border: '1px solid #ebebeb',});
         })
         $('.con-1').mouseleave(function(){
             var i = $(this).index();
             $('.w3').css({  height:"0px",});
             console.log($(this).index());
             $('.o1').css({ border: '1px solid white',});
            //  $('.con-1 li').siblings().find('.o1').css({  display:"none",});
            //   $('.con-1 li').eq(i).find('.o1').css({  display:"block",})
         })
         $('button').hover(function(){
            $('button').css({  backgroundColor:"orange",});
            $('.fdj').css({  color:"white",});
         },function(){
            $('button').css({  backgroundColor:"#fff",});
            $('.fdj').css({  color:"black",});
         })
         $('.gw').hover(function(){
            $('.gwxl').css({ height:"100px",});
            $('.gw').css({  backgroundColor:"#fff",color:"orange"});
         },function(){
            $('.gwxl').css({ height:"0px",});
            $('.gw').css({  backgroundColor:"#424242",color:"#B0B0B0"});
         })
         $('.ew').hover(function(){
            $('.ewm').css({ height:"148px",});
            $('.ew').css({color:"#fff"});
         },function(){
            $('.ewm').css({ height:"0px",});
            $('.ew').css({ color:"#B0B0B0"});
         })

         $('input').click(function(e){
            $('input').css({ border: '2px solid orange',});
            $('button').css({ border: '2px solid orange',});
            $('.ser-xl').css({ display:"block",});
             e.stopPropagation();
         })        
         $('body').click(function(e){
            $('input').css({ border: '2px solid black',});
            $('button').css({ border: '2px solid black',});
            $('.ser-xl').css({ display:"none",});
            e.stopPropagation();
         })   
    </script>
</body>
</html>